<template>
  <div id="app">
    <el-container>
      <el-header>
        <top-header></top-header>
      </el-header>
      <el-main>
        <div class="main">
          <div class="main-container">
            <ul class="list">
              <li>
                <div class="ranking"><!--这里是排名 -->#25</div>
                <div class="content">
                  <div class="top">
                    <div class="pic-box">
                      <!--这里是电影图片 -->
                      <img src="http://img3.doubanio.com/view/photo/s_ratio_poster/public/p2315672647.webp" alt="">
                    </div>
                    <div class="main-info">
                      <a href="https://movie.douban.com/subject/25662329/"><h3>疯狂动物城&nbsp;/&nbsp;Zootopia</h3></a>
                      <p>2016&nbsp;&nbsp;喜剧/动画/冒险</p>
                      <div class="rating-collect">
                        <div class="rating">
                          <el-rate
                            v-model="ratingValue[0]"
                            allow-half
                            disabled
                            show-score
                            :max=10
                            text-color="#ff9900"
                            score-template="{value}">
                          </el-rate>
                        </div>
                        <div class="collect">774602人收藏</div>
                      </div>
                      <ul class="directors">
                        <span>导演:</span>
                        <li>
                          <a href="https://movie.douban.com/celebrity/1286985/">
                            <div class="avatar-box">
                              <img src="http://localhost:8021/img/http://img7.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1457505519.94.webp" alt="">
                            </div>
                            <span class="name">拜伦·霍华德</span>
                          </a>
                        </li>
                        <li>
                          <a href="https://movie.douban.com/celebrity/1286985/">
                            <div class="avatar-box">
                              <img src="http://localhost:8021/img/http://img7.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1457505519.94.webp" alt="">
                            </div>
                            <span class="name">拜伦·霍华德</span>
                          </a>
                        </li>
                      </ul>
                      <ul class="casts">
                        <span>主演:</span>
                        <li>
                          <a href="https://movie.douban.com/celebrity/1017930/">
                            <div class="avatar-box">
                              <img src="http://localhost:8021/img/http://img7.doubanio.com/view/celebrity/s_ratio_celebrity/public/p4815.webp" alt="">
                            </div>
                            <span class="name">金妮弗·古德温</span>
                          </a>
                        </li>
                        <li>
                          <a href="https://movie.douban.com/celebrity/1017930/">
                            <div class="avatar-box">
                              <img src="http://localhost:8021/img/http://img7.doubanio.com/view/celebrity/s_ratio_celebrity/public/p4815.webp" alt="">
                            </div>
                            <span class="name">金妮弗·古德温</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-main>
      <el-footer>
        <top-pagination/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "./components/Header";
import Pagination from "./components/Pagination";
import './css/main.css';

export default {
  name: "App",
  components: {
    'top-header':Header,
    'top-pagination':Pagination
  },
  data(){
    return{
      ratingValue:[8.5,4.5,8.8]
    }
  }
};
</script>

<style scoped>
  
</style>
